<template>
  <div>
    <div>
      <div>
        <div
          style="
            font-weight: 600;
            color: #696cff;
            font-size: 22px;
          "
        >
          近7天流水
          <a-switch @click="switchColorMethod" v-model:checked="switchColor" />
        </div>
        <div>
          <div id="reservation" style="height: 400px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import echarts from "@/echarts";
import { findWeekdayData ,findBusinessWeekdayData} from "@/api/index";
import { useAdminStore } from "@/stores/admin";

const adminStore = useAdminStore();
const switchColor = ref(false);
const data = ref([]);
onMounted(() => {
  if (adminStore.admin.role === '管理员') {
    //管理员
    getWeekdayData()
  } else {
    //商户
    getBusinessWeekdayData();
  }
  setTimeout(() => {
    initReservation();
  }, 1000);
});

//获取管理员近7天数据
function getWeekdayData() {
  findWeekdayData().then((res) => {
    if (res.code === 200) {
      data.value = res.data;
    }
  })
}

//获取商户近7天数据
function getBusinessWeekdayData() {
  findBusinessWeekdayData(adminStore.admin.key).then((res) => {
    if (res.code === 200) {
      data.value = res.data;
    }
  })
}

function switchColorMethod() {
  initReservation();
}

function initReservation() {
  var myChart = echarts.init(document.getElementById("reservation"));
  var option = {
    xAxis: {
      type: "category",
      data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: data.value,
        type: "line",
        smooth: true,
      },
    ],
  };
  if (switchColor.value) {
    myChart.dispose();
    myChart = echarts.init(document.getElementById("reservation"), "dark");
    myChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  } else {
    myChart.dispose();
    myChart = echarts.init(document.getElementById("reservation"));
    myChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  }
}
</script>

<style scoped>
</style>